<template>
    <div :id="id" class="chart-box"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        id: {
            type: String,
            default: () => {
                return 'blockChart'
            }
        }
    },
    data() {
        return {
            myChart: undefined,
            option: {}
        };
    },
    destroyed() {
        window.removeEventListener("resize", () => {})
    },
    methods: {
        init(info) {
            var chartDom = document.getElementById(this.id);
            this.myChart = echarts.init(chartDom, 'macarons');
            // //当 鼠标移到线条上时触发
            // this.myChart.on('mousemove', function (params) {
            //     window.selectSeries = params.seriesName;
            // });
            // //当 鼠标移出线条时触发 ，如果不处理这个，鼠标移到空白上还有tooltip显示。
            // this.myChart.on('mouseout', function (params) {
            //     window.selectSeries = '';
            // });
            let barWidth = '40%'
            this.option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        let tar
                        let list = params && params.length > 0 ? params : []
                        if (list.length === 0) {
                            return ''
                        }
                        let index = list.findIndex(o => o && o.value !== '-')
                        if (index !== -1) {
                            tar = list[index]
                            return `<div style="font-size: 14px;">${tar.axisValue}</div><div style="width: fit-content; display: flex; align-items: center; padding-top: 4px; font-size: 14px;">
                                    ${tar.marker}<div style="min-width: 60px; margin-right: 20px;">${tar.seriesName}</div><div style="font-weight: bold;">${tar.data}</div>
                                </div>`
                        } else {
                            return ''
                        }
                    }
                },
                legend: {
                    top: '3%',
                    icon: 'rect',
                    itemWidth: 12,
                    itemHeight: 8,
                    itemGap: 24,
                    textStyle: {
                        color: 'rgba(0, 0, 0, 0.85)'
                    }
                },
                grid: {
                    top: '15%',
                    left: '0%',
                    right: '0%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['一级代理商', '二级代理商', '三级代理商', '分公司'],
                    axisLabel: {
                        color: 'rgba(0, 0, 0, 0.85)'
                    },
                    axisTick: {
                        show: false,
                        inside: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#000000' //最左侧Y轴颜色
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(0, 0, 0, 0.85)'
                    }
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: barWidth,
                        name: '一级',
                        stack: 'total',
                        color: '#135ADB',
                        data: [info.dataA || 0, '-', '-', '-'],
                    },
                    {
                        type: 'bar',
                        barWidth: barWidth,
                        name: '二级',
                        stack: 'total',
                        color: '#7FABFF',
                        data: ['-', info.dataB || 0, '-', '-'],
                    },
                    {
                        type: 'bar',
                        barWidth: barWidth,
                        name: '三级',
                        stack: 'total',
                        color: '#F99421',
                        data: ['-', '-', info.dataC || 0, '-'],
                    },
                    {
                        type: 'bar',
                        barWidth: barWidth,
                        name: '分公司',
                        stack: 'total',
                        color: '#FB466C',
                        data: ['-', '-', '-', info.dataD || 0],
                    },
                ]
            }
            this.option && this.myChart.setOption(this.option);
            window.addEventListener("resize", () =>{
                this.myChart.resize();
            })
        },
    },
};
</script>

<style lang="scss" scoped>
.chart-box {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>